<template lang="pug">
//- transition(:duration="500", enter-active-class="animated bounceInRight", leave-active-class="animated bounceOutRight")
.menu-pano
  .change-scene(@click='changeNightEffect' title='切换白天黑夜' v-if="getshowNight")
    i.iconfont(:class='isNight ? "icon-baitian-qing" : "icon-moono"')
  .menu(
    ref="toolsbarWrap",
    v-if="getSceneStatus")
    .drop-wrap(ref="dropWrap")
    el-tooltip(
      effect="dark",
      placement="left",
      v-if="item.display && item.title != 'usercenter' "
      v-for="(item, index) in getMiniMapList",
      :key="item.type_id",
      :content="item.act_title")
      .menu-item(@click="handleClick(item, index)")
        span.menu-icon(:style="getBgColorStyle")
          i.iconfont(v-show="item.isActive", :class="item.active_icon", :style="getColorStyle")
          i.iconfont(v-show="!item.isActive", :class="item.icon", :style="getColorStyle")

    el-tooltip(
      effect="dark",
      placement="left",
      v-if='item.type_id === "bgmusic"'
      v-for="(item, index) in getMenuList",
      :key="index",
      :content="item.isActive ? item.act_title : item.dis_title",
      @click.native="handleSytemMenuItem(item, index)")
      .menu-item.omit
        span.menu-icon(:style="getBgColorStyle")
          i.iconfont(v-show="item.isActive", :class="item.active_icon", :style="getColorStyle")
          i.iconfont(v-show="!item.isActive", :class="item.icon", :style="getColorStyle")

    MiniMap.minimap-g(v-if="minimapFlat", ref="miniMapWrap")

  van-action-sheet(v-model="navSheet", :actions="actions", cancel-text="取消")

</template>

<script>
import themeMixin from '@/mixins/theme'
import menuMixin from '@/mixins/menu'
import MiniMap from './MiniMap'
import { mapGetters } from 'vuex'
import {
  handleToolsBar,
  filterMenu,
  handleCustomMenu,
  filterToolsBarMenu
} from '@/utils/menu'

export default {
  mixins: [themeMixin, menuMixin],
  data () {
    return {
      isShow: true,
      IS_ESTATEPROGRAM: $globalconfig.MODULES.IS_ESTATEPROGRAM,
      showTips: false,
      minimapFlat: true, // 小地图图标开关
      miniMapData: null,
      curSceneId: null,
      navSheet: false,
      navActions: [],
      toolsBarMenu: [],
      tipPos: 0,
      isNight: false,
      nightSceneId: 0,
      moonSceneId: 0
    }
  },
  async mounted () {
    this.showMiniMapIcon()

    this.menuDataList = await filterMenu(this.$CONFIG.defMenu)
    this.showNavMenu()
    // 有加载动画时, 关闭加载动画后执行关闭tip
    this.$vgo.on('loadFinish', () => {
      this.closeTip()
    })
  },
  computed: {
    ...mapGetters(['worksData', 'panoInfo', 'sceneList', 'menuData']),
    getWorksData () {
      if (this.worksData && this.worksData.length > 0) {
        return true
      }
    },
    getSceneStatus () {
      // toolsbar 所需数据返回后加载
      if (this.worksData && this.sceneList && this.menuData) {
        return true
      }
    },
    getRollfont () {
      if (this.panoInfo) {
        return this.panoInfo.rollfont
      }
    },
    getTipBoxStyle () {
      if (this.tipPos) {
        return `top: ${this.tipPos - 50 - (this.getIsInIframe ? 46 : 0)}px`
      }
    },
    getMenuList () {
      if (this.menuDataList && this.menuDataList.length > 0) {
        let arr = this.menuDataList.filter(item => item.type_id == 'bgmusic')
        return arr
      }
      return []
    },
    getMiniMapList () {
      if (!this.navActions.length) {
        let arr = this.toolsBarMenu.filter(item => item.title != "navmenu")
        return arr.filter(item => item.type_id == 1003)
      }
      return this.toolsBarMenu
    },
    getshowNight () {
      let isshow = false
      if(this.IS_ESTATEPROGRAM && this.sceneList ) {
        this.sceneList.forEach(item => {
          if(item.switchscene_id  && item.switchscene_id !== 0){
            isshow = true
          }
        })
      }
      return isshow
    }

  },
  methods: {
    changeNightEffect() {
      this.isNight = !this.isNight
      if(this.moonSceneId == 0) {
        this.moonSceneId = this.$krp.getSceneId()
      }

      let sceneid = this.getNightSceneId()
      this.$krp.loadScene(sceneid, 'BLEND(1.0, easeInCubic)')
      this.$krp.getHotpoints(this.moonSceneId)
    },
    getNightSceneId(){
      this.sceneList.forEach(item => {
        if(this.moonSceneId == item.switchscene_id){
          this.nightSceneId = item.scene_id
        }
      })
      return this.isNight ? this.nightSceneId : this.moonSceneId
    },
    showNavMenu () {
      this.$vgo.on('navmenu:bottom', (themeId) => {
        if (themeId === 'view') {
          // 视角底部弹出框
          let perspectData = this.$CONFIG.perspectiveMenu
          this.formatActions(perspectData, this.handlePerspect)
        } else {
          console.log('6--------------')
          // 第三套皮肤底部导航菜单
          if (themeId == 3) {
            this.formatActions(this.getBottomMenu, this.handleNavMenu)
          } else {
            this.formatActions(this.getNavMenu, this.handleNavMenu)
          }
        }
        this.handleSheet('navSheet')
      })
    },
    showMiniMapIcon () {
      this.$vgo.on('show:minimap-icon', (data) => {
        if (data) {
          this.miniMapData = data.miniMapObj
          this.curSceneId = data.sceneId
          this.minimapFlat = true
          this.toolsBarMenu = JSON.parse(JSON.stringify(filterToolsBarMenu()))
        } else {
          this.toolsBarMenu.map((item, idx) => {
            if (item.title == 'minimap') {
              this.toolsBarMenu.splice(idx, 1)
            }
          })
        }
      })
    },
    handleSheet (type) {
      this.navSheet = true
    },
    showIcon () {
      this.isShow = !this.isShow
      if (this.isShow) {
        setTimeout(() => {
          this.tipPos = this.$refs.dropWrap.offsetHeight
        }, 200)
      }
    },
    // 自定义导航菜单
    handleNavMenu (item) {
      handleCustomMenu(item)
      this.navSheet = false
    },
    handleClick (item, index) {
      if (item.title == 'works') {
        this.showTips = false
      }
      console.log('item', item)
      handleToolsBar(item)
    },
    closeTip (delay = 4000) {
      setTimeout(() => {
        this.showTips = false
      }, delay);
    }
  },
  components: {
    MiniMap
  },
  watch: {
    panoInfo: {
      handler (data) {
        // 没有加载动画时关闭tip
        if (data && data.isloading == 2) {
          this.closeTip(7000)
        }
      },
      immediate: true
    },
    getSceneStatus: {
      handler (data) {
        // toolsbar 所需数据返回后加载
        if (data) {
          this.toolsBarMenu = JSON.parse(JSON.stringify(filterToolsBarMenu()))
          this.formatActions(this.getNavMenu, this.handleNavMenu)
          this.$nextTick(() => {
            this.tipPos = this.$refs.dropWrap.offsetHeight
            this.showTips = true
          })
        }
      },
      immediate: true
    }
  },
}
</script>

<style lang="stylus">
// @import '../../assets/styles/mixin.styl'
// @import '../../assets/styles/color.styl'
$white = #fff
$theme-classic-color = #58B7FF
$theme-classic-color-active = #0e94ff
.menu-pano
  z-index 9
  position fixed
  right 0
  top 80px
  .change-scene
    cursor pointer
    margin-left 7px
    margin-right 5px
    width 34px
    height 34px
    background-color rgba(#9c27b0, 0.8)
    border-radius 50%
    display flex
    justify-content center
    align-items center
    i
      font-size 26px
      color #fff
  .menu
    display flex
    flex-direction column
    box-sizing: border-box
    color: #fff
    position relative
    .minimap-g
      top 0
    .menu-item
      width: 50px
      display: inline-block
      text-align: center
      cursor: pointer
      margin-bottom 5px
      .menu-text
        font-size: 12px
        margin-top: 5px
      .menu-icon
        display: inline-block
        width: 30px
        height: 30px
        line-height: 30px
        border-radius: 50%
        transition: all 1s
        background: $white
        i
          color: $theme-classic-color
          vertical-align: middle
@media only screen and (min-width 1200px)
  .menu-pano
    top 100px

</style>
